<template>
  <div>
    <div id="main" style="width: 100%;height: 600px"></div>
    <div id="p2" style="width: 100%;height: 600px"></div>
    <!--        <div id="p3" style="width: 100%;height: 600px"></div>-->
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts';

export default {
  name: "Home",
  data() {
    return {
      getviewList: [],
      myChart: null,
      myChart1: null,
      option: {
        title: {
          text: '热帖数据',
          subtext: 'Hotpost data'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: ['点赞量', '浏览量', '总量']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              formatter: function (value) {
                return value.length > 5 ? value.slice(0, 5) + '...' : value;
              }
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].axisValueLabel; // 在提示框中显示完整的轴标签
              }
            }
          },

        ],
        yAxis: [
          {
            type: 'value',
            name: '浏览量',
            min: 0,
            max: 200,
            interval: 20,
            axisLabel: {
              formatter: '{value} 次'
            }
          },
          {
            type: 'value',
            name: '总量',
            min: 0,
            max: 200,
            interval: 20,
            axisLabel: {
              formatter: '{value} 次'
            }
          }
        ],
        series: [
          {
            name: '点赞量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 次';
              }
            },
            data: []
          },
          {
            name: '浏览量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 次';
              }
            },
            data: []
          },
          {
            name: '总量',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 次';
              }
            },
            data: []
          }
        ]
      },
      option1: {
        title: {
          text: '访问记录',
          subtext: 'Access Records'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['用户登录次数', '问答次数']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '用户登录次数',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          },
          {
            name: '问答次数',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          }
        ]
      },
    }

  },
  created() {
    this.getData();

  },
  mounted() {//页面元素渲染后再触发
    var chartDom = document.getElementById('main');
    var chartDom1 = document.getElementById('p2');
    /*var chartDom2 = document.getElementById('p3');*/
    this.myChart = echarts.init(chartDom);
    this.myChart1 = echarts.init(chartDom1);
    /* var myChart2 = echarts.init(chartDom2);*/
    /* var data12=[
             ////////////////////////////////////////
             [
                 { name: '圣彼得堡来客', value: 5.6 },
                 { name: '陀思妥耶夫斯基全集', value: 1 },
                 { name: '史记精注全译（全6册）', value: 0.8 },
                 { name: '加德纳艺术通史', value: 0.5 },
                 { name: '表象与本质', value: 0.5 },
                 { name: '其它', value: 3.8 }
             ],
             // ////////////////////////////////////////
             [
                 { name: '银河帝国5：迈向基地', value: 3.8 },
                 { name: '俞军产品方法论', value: 2.3 },
                 { name: '艺术的逃难', value: 2.2 },
                 { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
                 { name: 'Scrum 精髓', value: 1.2 },
                 { name: '其它', value: 5.7 }
             ],
             ////////////////////////////////////////
             [
                 { name: '克莱因壶', value: 3.5 },
                 { name: '投资最重要的事', value: 2.8 },
                 { name: '简读中国史', value: 1.7 },
                 { name: '你当像鸟飞往你的山', value: 1.4 },
                 { name: '表象与本质', value: 0.5 },
                 { name: '其它', value: 3.8 }
             ]
         ],
         option2= {
             title: {
                 text: '阅读书籍分布',
                 //left: '',
                 subtext: 'Access Records',
                 top:'10%',
                 textStyle: {
                     color: '#000000',
                     fontWeight: 'bold',
                 }
             },
             series: data12.map(function (data, idx) {
                 var left = idx * 33.3;
                 return {
                     type: 'pie',
                     radius: [40, 100],
                     top: '20%',  // 让所有的饼图在垂直方向上的位置相同
                     height: '30%',  // 统一设置饼图的高度
                     left: left + '%',  // 根据 idx 设置每个饼图的水平位置
                     width: '33.33%',  // 统一设置每个饼图的宽度
                     itemStyle: {
                         borderColor: '#fff',
                         borderWidth: 1
                     },
                     label: {
                         alignTo: 'edge',
                         formatter: '{name|{b}}\n{time|{c} 小时}',
                         minMargin: 5,
                         edgeDistance: 10,
                         lineHeight: 15,
                         rich: {
                             time: {
                                 fontSize: 10,
                                 color: '#999'
                             }
                         }
                     },
                     labelLine: {
                         length: 15,
                         length2: 0,
                         maxSurfaceAngle: 80
                     },
                     labelLayout: function (params) {
                         const isLeft = params.labelRect.x < myChart2.getWidth() / 2;
                         const points = params.labelLinePoints;
                         // Update the end point.
                         points[2][0] = isLeft
                             ? params.labelRect.x
                             : params.labelRect.x + params.labelRect.width;
                         return {
                             labelLinePoints: points
                         };
                     },
                     data: data
                 };
             })
         };*/
    this.getData();
    this.getData1();
    /*        myChart2.setOption(option2);*/
  },
  methods: {
    getData() {
      axios({
        method: "GET",
        url: this.$e.Url+"/admin/GetView",
      }).then((res) => {
        console.log("请求API接口【/admin/GetView】", res);
        this.getviewList = res.data;
        let titles = res.data.map(item => item.title);
        let likeCounts = res.data.map(item => item.likeCount);
        let viewCounts = res.data.map(item => item.viewCount);
        let totalCounts = res.data.map(item => item.likeCount + item.viewCount);

        this.option.series[0].data = likeCounts;
        this.option.series[1].data = viewCounts;
        this.option.series[2].data = totalCounts;
        this.$set(this.option.xAxis[0], 'data', titles);
        this.myChart.setOption(this.option);
      })
    },
    getData1() {
      axios({
        method: "GET",
        url: this.$e.Url+"/admin/GetRecord",
      }).then((res) => {
        res.data.sort((a, b) => a.month - b.month);
        console.log("请求API接口【/admin/GetRecord】", res.data);
        /*this.getviewList = res.data;*/
        /*let titles = res.data.map(item => item.title);*/
        let loginCount = res.data.map(item => item.loginCount);
        let questionCount = res.data.map(item => item.questionCount);
        /*let totalCounts = res.data.map(item => item.likeCount + item.viewCount);*/

        this.option1.series[0].data = loginCount;
        this.option1.series[1].data = questionCount;
        this.myChart1.setOption(this.option1);
      })
    },
    getData2() {

      //this.myChart2.setOption(this.option2);
    }

  }
}
</script>

<style>

</style>
